<template>
    <div style="padding: 0 20px">
        <el-row class="line-text">
            <span class="title-medium text-important">人员列表</span>
            <span
                class="content-text"
                style="margin-left: 10px"
            >
                <el-checkbox-group v-model="checkList">
                    <el-checkbox
                        v-for="(item, index) in newDoctorList"
                        @change="handleChange(item, index)"
                        :label="item.userName"
                        :key="item.index"
                    >
                        {{ item.userName }}
                    </el-checkbox>
                </el-checkbox-group>
            </span>
        </el-row>
        <el-row
            v-if="isTheseDoctor"
            style="margin-top: 10px"
        >
            <el-col :span="16">
                <el-input
                    type="textarea"
                    :rows="3"
                    style="width: 100%"
                    placeholder="请输入内容"
                    v-model="content"
                    maxlength="1000"
                >
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-button
                    @click="contentSend"
                    type="primary"
                    size="mini"
                    style="margin: 0 10px"
                >发送</el-button>
            </el-col>
        </el-row>
        <el-row
            class="line-text-title"
            type="flex"
            justify="middle"
        >
            <span class="title-medium text-important">讨论内容</span>
        </el-row>
        <div style="height: 580px; overflow-y: scroll">
            <el-row
                v-for="(msg, index) in messageList"
                :key="index"
                style="margin-top: 10px"
            >
                <div>
                    <span
                        class="discussion-head"
                        style="line-height: 24px"
                    >
                        {{ msg.createTime }}{{ msg.createUserName }}对{{ msg.sendToUserName }}说:
                    </span>
                </div>
                <div>
                    <span style="line-height: 30px; font-size: 16px">
                        {{ msg.content }}
                    </span>
                </div>
            </el-row>
        </div>
    </div>
</template>

<script>
import _ from 'lodash'

export default {
  name: 'ConsultationDiscussion',
  props: {
    doctorList: {
      type: Array,
      default: () => []
    },
    messageList: {
      type: Array,
      default: () => []
    },
    isTheseDoctor: {
      type: Boolean,
      default: false
    },
    orders: {
      type: Object,
      default: () => []
    }
  },
  watch: {
    doctorList(newValue, oldValue) {
      let _this = this
      _this.initDataConstractor(newValue)
    }
  },
  data() {
    return {
      uArgs: this.$store.getters.getUArgs,
      content: '',
      checkList: [],
      newDoctorList: [],
      checkedDoctorList: []
    }
  },
  mounted() {
    let _this = this
    _this.initDataConstractor(_this.doctorList)
  },
  methods: {
    initDataConstractor(val) {
      val.forEach(doctor => {
        if (
          doctor.isInvited == 0 ||
          doctor.isInvited == 1 ||
          doctor.isInvited == 2 ||
          doctor.isFinal == 1
        ) {
          let level = doctor.isFinal == 1 ? '终审' : doctor.isInvited == 1 ? '邀请' : '诊断'
          this.newDoctorList.push({
            userId: doctor.id,
            userName: `${level}专家：${_.get(doctor, 'name', '')}(${doctor.expertPhone})`
          })
        } else {
          if (doctor.allocationUserId) {
            this.newDoctorList.push({
              userId: doctor.allocationUserId,
              userName: `调度员：${doctor.allocationUserName}(${doctor.allocationUserPhone})`
            })
          }
          if (doctor.orderType === 1) {
            this.newDoctorList.push({
              userId: doctor.userId,
              userName: `申请医生:${doctor.userName}(${doctor.userPhone})`
            })
          } else if (doctor.orderType === 2) {
            this.newDoctorList.push({
              userId: doctor.userId,
              userName: `用户:${doctor.userName}(${doctor.userPhone})`
            })
          }
        }
      })
      this.newDoctorList = this.unique(this.newDoctorList)

      this.newDoctorList = this.newDoctorList.filter(item => {
        return item.userId != this.$store.state.user.id
      })
    },
    unique(arr) {
      const res = new Map()
      return arr.filter(arr => !res.has(arr.userId) && res.set(arr.userId, 1))
    },
    handleChange() {
      console.log(this.newDoctorList)
      this.checkedDoctorList = this.checkList.map(name =>
        this.newDoctorList.find(item => item.userName === name)
      )
    },
    async contentSend() {
      if (this.content) {
        if (this.checkedDoctorList.length > 0) {
          let patientId = this.orders.patients[0].id
          await this.$axios({
            method: 'POST',
            url: `messageBoardController/save/message-board`,
            data: {
              content: this.content,
              createMessageBoardUsers: this.checkedDoctorList,
              orderId: this.orders.id
            }
          }).then(res => {
            if (res.data.code === 200) {
              let strName = ''
              this.checkedDoctorList.forEach(item => {
                strName += item.userName + ','
              })
              res.data.data.sendToUserName = strName
              this.messageList.push(res.data.data)
            } else {
              this.$message.warning('发送失败')
            }
          })
        } else {
          this.$message.warning('请选择要发送的人')
        }
      } else {
        this.$message.info('不能发送空消息')
      }
    }
  }
}
</script>

<style scoped>
.discussion-head {
  font-size: 18px;
  font-weight: 700;
}
</style>
